// 环境统计
<template>
  <div class="environmental">
    <comTitle class="flex">
      <template #title> 环境统计 </template>
    </comTitle>
    <div class="echarts">
      <statisticsTableHeader class="mb-10"></statisticsTableHeader>
      <div class="flex pl-24 pr-24">
        <div class="box1 mr-48">
          <!-- <div class="title cr-hui3 fs-16">超标区域分布</div> -->
          <charts :option="areacharge" />
        </div>
        <div class="box1">
          <div class="title bold fs-16 cr-hui3">超标因子分布</div>
          <div class="echart_right flex">
            <div class="center_chart">
              <echartData
                :wasteTypewuran="wasteTypewuran"
                :sum="sum"
                :width="120"
                :height="120"
              ></echartData>
            </div>
            <div class="data-right flex-column">
              <div class="sum cr-hui fs-16 flex-center mb-30">
                总计：<span class="familyD fs-24 pl-16 pr-16">{{ sum }}</span
                >次
              </div>
              <div class="data-end-right">
                <div
                  class="flex mb-30 status"
                  v-for="item in scaleData"
                  :key="item.name"
                >
                  <div class="flex-start">
                    <div
                      class="spotBig"
                      :style="{
                        'background-color': item.bg,
                      }"
                    >
                      <div
                        :class="`spot`"
                        :style="{
                          'background-color': item.color,
                        }"
                      ></div>
                    </div>
                    <span class="fs-12 cr-hui3">{{ item.name }}</span>
                  </div>
                  <div>
                    <span
                      class="fs-20 cr-blue familyD"
                      :style="{
                        color: item.color,
                      }"
                      >{{ item.value }}</span
                    >
                    <span class="fs-14 cr-hui4 ml-12">次</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "environmentalStatistics",
  components: {
    statisticsTableHeader: () => import("../statisticsTableHeader"),
    echartData: () => import("../../home/children/echartData"),
  },
  data() {
    return {
      areacharge: {},
      sum: 220,
      wasteTypewuran: {},
      scaleData: [
        {
          name: "有毒有害气体",
          value: 80,
          color: "#00D4B9",
          bg: "#B7EDE7",
        },
        {
          name: "温度",
          value: 60,
          color: "#F7A515",
          bg: "#F8DDAF",
        },
        {
          name: "湿度",
          value: 40,
          color: "#5699FF",
          bg: "#C6D9FD",
        },
        {
          name: "含氧量",
          value: 40,
          color: "#F9708B",
          bg: "#F9CCD7",
        },
      ],
      complete: {
        "203室": 9,
        "205室": 6,
        "504室": 6,
        "504室": 5,
        "308室": 4,
        "105室": 3,
        "307室": 2,
        "304室": 2,
      },
    };
  },
  mounted() {
    this.initareacharge(this.complete);
    this.ititDevice();
  },
  methods: {
    /* 超标区域分布 */
    initareacharge(data) {
      if (Object.values(data).length > 0) {
        this.areacharge = {
          grid: {
            height: "76%",
            left: "14%",
            right: "10%",
          },
          title: {
            text: "超标区域分布",
            textStyle: {
              color: "#5F717D",
              fontSize: 16,
            },
            top: 20,
            left: "center",
          },
          xAxis: {
            minInterval: 2,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#5F717D",
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                color: "#e5e5e5",
                type: "dashed",
              },
            },
            type: "value",

            nameTextStyle: {
              color: "#8B9AA7",
            },
          },
          textStyle: {
            color: "#8B9AA7",
          },
          yAxis: {
            name: "超标次数/次",
            nameTextStyle: {
              color: "#737373",
              verticalAlign: "bottom",
              align: "right",
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#00BFB1",
              },
            },
            type: "category",
            data: Object.keys(data),
            inverse: false,
          },
          series: [
            {
              label: {
                show: true,
                position: "right",
                position: "right",
                color: "#00BFB1",
              },
              barWidth: 14,
              barGap: "100%",
              itemStyle: {
                barBorderRadius: [0],
                color: "#00BFB1",
              },
              data: Object.values(data),
              type: "bar",
            },
          ],
        };
      }
    },
    /* 设备统计状态 */
    ititDevice() {
      var that = this;
      let data = [];
      for (var i = 0; i < this.scaleData.length; i++) {
        if (this.scaleData[i].value > 0) {
          data.push(
            {
              value: this.scaleData[i].value,
              name: this.scaleData[i].name,
              itemStyle: {
                normal: {
                  borderWidth: 6,
                  shadowBlur: 8,
                  borderColor: this.scaleData[i].color,
                  shadowColor: this.scaleData[i].bg,
                },
              },
              label: {
                show: true,
                color: this.scaleData[i].color,
              },
              labelLine: {
                length: 60,
                show: true,
                lineStyle: {
                  color: this.scaleData[i].color,
                },
              },
            },
            {
              value:
                this.scaleData.length > 1 &&
                this.sum !== this.scaleData[i].value
                  ? 8
                  : 0,
              name: "",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 10,
                },
              },
            }
          );
        }
        if (this.scaleData.length - 1 === i) {
          this.wasteTypewuran = {
            tooltip: {
              show: false,
            },
            legend: {
              show: false,
            },
            toolbox: {
              show: false,
            },
            series: [
              {
                name: "",
                type: "pie",
                clockWise: false,
                radius: [98, 100],
                hoverAnimation: false,
                itemStyle: {
                  normal: {
                    label: {
                      show: false,
                      position: "outside",
                      formatter: function (params) {
                        var percent = 0;
                        percent =
                          ((params.value.toFixed(0) / that.sum) * 100).toFixed(
                            0
                          ) + "%";
                        if (params.name !== "") {
                          return percent;
                        } else {
                          return "";
                        }
                      },
                      rich: {
                        white: {
                          color: "#ddd",
                          align: "center",
                          padding: [3, 0],
                        },
                      },
                    },
                  },
                },
                data: data,
              },
            ],
          };
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.environmental {
  padding: 0px 24px;
  .echarts {
    .box1 {
      width: 50%;
      background: #f7f8fc;
      border-radius: 4px;
      height: 444px;
      .title {
        width: 100%;
        height: 66px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .echart_right {
        width: 100%;
        display: flex;
        align-items: center;
        height: 77%;
        .center_chart {
          position: relative;
          width: 60%;
          height: 100%;
        }
        .data-right {
          width: 26%;
          height: 100%;
          justify-content: center;
          margin-right: 50px;
          .sum {
            width: 165px;
            height: 40px;
            background: #eff0f2;
            border-radius: 4px;
          }
          .data-end-right {
            box-sizing: border-box;
            width: 100%;
            .status:nth-last-child(1) {
              margin-bottom: 0px !important;
            }
            .spot {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              z-index: 1;
              width: 12px;
              height: 12px;
              margin-right: 12px;
            }
          }
        }
      }
    }
  }
}
</style>